{%- assign section_identifier = '#shopify-section-' | append: section.id -%}
{%- assign  padding_top = section.settings.padding_top | append:'px' -%}
{%- assign  padding_bottom = section.settings.padding_bottom | append:'px' -%}

{%- assign padding_mobile_top = section.settings.padding_top_mob | append: 'px' -%}
{%- assign padding_mobile_bottom = section.settings.padding_bottom_mob | append: 'px' -%}


{%- style -%}
 {{ section_identifier }} .brand-cards-wrap {
    padding-top: {{padding_top}};
    padding-bottom: {{padding_bottom}};
  }
  {{ section_identifier }} .brand-cards-wrap .sec_heading {
    color: {{ section.settings.text_color_title }};
  }
  {{ section_identifier }} .brand-cards-wrap .tab-wrap .tab-content .card-blocks .item-card:last-child {
    padding-left: 0;
  }
  {{ section_identifier }} .brand-cards-wrap .tab-wrap .tab-content .card-blocks .item-card {
      padding: 24px;
  }
  {{ section_identifier }} .brand-cards-wrap .tab-wrap .tab-content .card-blocks .inner-card {
        height: auto;
  }
  {{ section_identifier }} .brand-cards-wrap .tab-wrap .tab-content .card-blocks .item-card .title {
      font-size: 24px;
      font-weight: 700;
  }
  {{ section_identifier }} .brand-cards-wrap .tab-wrap .tab-content .card-blocks .item-card .description {
      font-size: 16px;
      line-height: 24px;
      margin-top: 8px;
  }
  {{ section_identifier }} .brand-cards-wrap {
    margin-top: 0;
  }
   {{ section_identifier }} .brand-cards-wrap .tab-wrap .tab-content {
      margin-top: 40px;
  }
  {{ section_identifier }} .brand-cards-wrap .tab-wrap .tab-content .wrap .headline,
   {{ section_identifier }}  ul.nav li.nav-item h3 {
        font-size: 32px;
        font-weight: 700;
    }
   {{ section_identifier }} .brand-cards-wrap .tab-wrap .nav .nav-item .item {
          opacity: 40%;
    }
    {{ section_identifier }} .brand-cards-wrap .tab-wrap .nav .nav-item .active {
      opacity: 1;
    }
  
    {{ section_identifier }}  .brand-cards-wrap .tab-wrap .tab-content .start-area {
        padding: 0 !important;
    }
    .brand-cards-wrap .tab-wrap .tab-content .tab-pane .col-6:first-child {
        padding-right: 20px;
        padding-left: 0;
    }
    .brand-cards-wrap .tab-wrap .tab-content .tab-pane .col-6:last-child{
        padding-left: 20px;
        padding-right: 0 !important;
    }
 @media only screen and (max-width: 430px) {
    {{ section_identifier }} .brand-cards-wrap {
      padding-top: {{ padding_mobile_top }};
      padding-bottom: {{ padding_mobile_bottom }};
    }
     {{ section_identifier }}  ul.nav li.nav-item h3 {
          font-size: 12px;
      }
      {{ section_identifier }} .brand-cards-wrap .tab-wrap .tab-content .card-blocks .item-card .title {
          font-size: 20px;
      }
      {{ section_identifier }} .brand-cards-wrap .tab-wrap .tab-content .card-blocks .item-card .description {
          font-size: 14px;
          line-height: 20px;
      }
    {{ section_identifier }} .brand-cards-wrap .tab-wrap .tab-content {
          margin-top: 16px;
      }
    {{ section_identifier }}  .brand-cards-wrap .tab-wrap .tab-content .start-area {
        padding: 0 !important;
    }
    {{ section_identifier }} .brand-cards-wrap .tab-wrap .tab-content .wrap .headline {
       font-size: 24px;
    }
  }


{%- endstyle -%}
<div class="container brand-cards-wrap">
  <h2 class="mb-0 text-center letter-spacing-4 sec_heading section-title">
    {% comment %} text-start text-nowrap {% endcomment %}
    <span class="d-inline-block">{{ section.settings.headline }}</span>
  </h2>
  <div class="tab-wrap">
    <ul class="nav border-0 row as-line-animation w-100 m-0 as-brand-page-sticky-nav">
      {% for block in section.blocks %}
        {% if block.type == 'tab' %}
          <li class="nav-item position-relative col-6 p-0">
            <div
              class="{% if forloop.first %} active {% endif %} item w-100 text-nowrap position-relative text-decoration-none text-center px-0 fw-bold"
              id="tab-{{ forloop.index }}"
              data-bs-toggle="tab"
              data-bs-target="#{{ block.settings.id }}"
              role="tab"
              aria-selected="true"
            >
              <h3 class="letter-spacing-4 mb-0" data-time="{{ forloop.index0 | times: 500 }}" style="color: {{ block.settings.tab_text_color }}">
                {{ block.settings.text }}
              </h3>

              <div
                class="bottom-line position-absolute w-100 line-width-init as-line-width"
                data-time="{{ forloop.index0 | times: 500 }}" style="background-color: {{ block.settings.tab_text_color }}"
              ></div>
            </div>
          </li>
        {% endif %}
      {% endfor %}
    </ul>
    <div class="tab-content">
      {% for block in section.blocks %}
        {% if block.type == 'tab' %}
          {% assign currentId = block.settings.id %}
          <div
            class="tab-pane fade {% if forloop.first %} show active {% endif %}"
            id="{{ block.settings.id }}"
            role="tabpanel"
            aria-labelledby="home-tab"
          >
            <div class="row mx-0 as-card-animation d-lg-flex d-none">
              <div class="col-6">
                <div data-anitype="{{ forloop.index0 | plus: 1 }}" class="position-relative wrap h-100 card-scale-init as-card-scale overflow-hidden">
                  {%- assign image_blocks = section.blocks | where: 'type', 'image' -%}
                  {% for item in image_blocks %}
                    {% if currentId == item.settings.id %}
                      <div class="picture h-100 overflow-hidden d-lg-block d-none rounded-2">
                        <picture>
                          <img
                            class="w-100 object-fit-cover h-100"
                            src="{{ item.settings.desktop_image | img_url: 'master' }}"
                            alt="{{ item.settings.desktop_image.alt | escape }}"
                            width="800"
                            height="600"
                            loading="lazy"
                          >
                        </picture>
                      </div>
                      <div class="picture h-100 overflow-hidden rounded-2 d-block d-md-none">
                        <picture>
                          <img
                            class="w-100 object-fit-cover h-100"
                            src="{{ item.settings.mobile_image | default: item.settings.desktop_image | img_url: 'master' }}"
                            alt="{{ item.settings.mobile_image.alt | default: item.settings.desktop_image.alt | escape }}"
                            width="400"
                            height="300"
                            loading="lazy"
                          >
                        </picture>
                      </div>
                      <h4 data-time="700" class="headline position-absolute top-0 fw-bold text-black letter-spacing-4">
                        {{ item.settings.title }}
                      </h4>
                    {% endif %}
                  {% endfor %}

                  {%- assign text_blocks = section.blocks | where: 'type', 'text' -%}
                  <div class="position-absolute bottom-0 w-100">
                    {% for item in text_blocks %}
                      {% if currentId == item.settings.id %}
                        <div class="text-area">
                          <div data-time="1000" class="fw-bold title text-black letter-spacing-4">
                            {{ item.settings.title }}
                          </div>
                          <div
                            data-time="1200"
                            class="description text-black letter-spacing-4"
                          >
                            {{ item.settings.description }}
                          </div>
                        </div>
                      {% endif %}
                    {% endfor %}
                  </div>
                </div>
              </div>
              <div class="col-6 position-relative end-area">
                {%- assign card_blocks = section.blocks | where: 'type', 'card' -%}
                {%- assign tab1_id = '' -%}
                {%- assign tab2_id = '' -%}
                {% for ele in card_blocks %}
                  {% if tab1_id != ele.settings.id and tab1_id == '' %}
                    {%- assign tab1_id = ele.settings.id -%}
                  {% else %}
                    {%- assign tab2_id = ele.settings.id -%}
                  {% endif %}
                {% endfor %}
                <div class="card-blocks overflow-hidden h-100">
                  {% if tab1_id == currentId %}
                    <div data-time="500" class="card-scale-init as-card-scale inner-card d-flex flex-nowrap">
                      {% for item in card_blocks %}
                        {% if currentId == item.settings.id %}
                          {% if forloop.index == 1 or forloop.index == 2 %}
                            <div class="item-card">
                              {% if item.settings.desktop_image or item.settings.mobile_image %}
                              <div class="card-image-wrap" style="max-height: 160px; overflow: hidden; margin-bottom: 16px; border-radius: 4px;">
                                <img
                                  class="w-100 object-fit-cover"
                                  src="{{ item.settings.desktop_image | default: item.settings.mobile_image | img_url: '600x160', crop: 'center' }}"
                                  alt="{{ item.settings.desktop_image.alt | default: item.settings.mobile_image.alt | escape }}"
                                  width="600"
                                  height="160"
                                  loading="lazy"
                                >
                              </div>
                              {% endif %}
                              <div data-time="700" class="title fw-bold text-black">
                                {{ item.settings.title }}
                              </div>
                              <div
                                data-time="900"
                                class="description text-black letter-spacing-4 "
                              >
                                {{ item.settings.description }}
                              </div>
                            </div>
                          {% endif %}
                        {% endif %}
                      {% endfor %}
                    </div>
                    <div data-time="800" class="card-scale-init as-card-scale inner-card d-flex flex-nowrap">
                      {% for item in card_blocks %}
                        {% if currentId == item.settings.id %}
                          {% if forloop.index == 3 or forloop.index == 4 %}
                            <div class="item-card">
                              {% if item.settings.desktop_image or item.settings.mobile_image %}
                              <div class="card-image-wrap" style="max-height: 160px; overflow: hidden; margin-bottom: 16px; border-radius: 4px;">
                                <img
                                  class="w-100 object-fit-cover"
                                  src="{{ item.settings.desktop_image | default: item.settings.mobile_image | img_url: '600x160', crop: 'center' }}"
                                  alt="{{ item.settings.desktop_image.alt | default: item.settings.mobile_image.alt | escape }}"
                                  width="600"
                                  height="160"
                                  loading="lazy"
                                >
                              </div>
                              {% endif %}
                              <div data-time="1000" class="title fw-bold text-black">
                                {{ item.settings.title }}
                              </div>
                              <div
                                data-time="1200"
                                class="description text-black letter-spacing-4 "
                              >
                                {{ item.settings.description }}
                              </div>
                            </div>
                          {% endif %}
                        {% endif %}
                      {% endfor %}
                    </div>
                  {% endif %}
                  {% if tab2_id == currentId %}
                    <div data-time="500" data-anitype="0" class="card-scale-init as-card-scale inner-card d-flex flex-nowrap">
                      {% for item in card_blocks %}
                        {% if currentId == item.settings.id %}
                          {% if forloop.index == 5 or forloop.index == 6 %}
                            <div class="item-card">
                              {% if item.settings.desktop_image or item.settings.mobile_image %}
                              <div class="card-image-wrap" style="max-height: 160px; overflow: hidden; margin-bottom: 16px; border-radius: 4px;">
                                <img
                                  class="w-100 object-fit-cover"
                                  src="{{ item.settings.desktop_image | default: item.settings.mobile_image | img_url: '600x160', crop: 'center' }}"
                                  alt="{{ item.settings.desktop_image.alt | default: item.settings.mobile_image.alt | escape }}"
                                  width="600"
                                  height="160"
                                  loading="lazy"
                                >
                              </div>
                              {% endif %}
                              <div data-time="700" class="title fw-bold text-black">
                                {{ item.settings.title }}
                              </div>
                              <div
                                data-time="900"
                                class="description text-black letter-spacing-4 "
                              >
                                {{ item.settings.description }}
                              </div>
                            </div>
                          {% endif %}
                        {% endif %}
                      {% endfor %}
                    </div>
                    <div data-time="800" data-anitype="0" class="card-scale-init as-card-scale inner-card d-flex flex-nowrap">
                      {% for item in card_blocks %}
                        {% if currentId == item.settings.id %}
                          {% if forloop.index == 7 or forloop.index == 8 %}
                            <div class="item-card">
                              {% if item.settings.desktop_image or item.settings.mobile_image %}
                              <div class="card-image-wrap" style="max-height: 160px; overflow: hidden; margin-bottom: 16px; border-radius: 4px;">
                                <img
                                  class="w-100 object-fit-cover"
                                  src="{{ item.settings.desktop_image | default: item.settings.mobile_image | img_url: '600x160', crop: 'center' }}"
                                  alt="{{ item.settings.desktop_image.alt | default: item.settings.mobile_image.alt | escape }}"
                                  width="600"
                                  height="160"
                                  loading="lazy"
                                >
                              </div>
                              {% endif %}
                              <div  data-time="1000" class="title fw-bold text-black letter-spacing-4">
                                {{ item.settings.title }}
                              </div>
                              <div
                                data-time="1200"
                                class="description text-black letter-spacing-4 "
                              >
                                {{ item.settings.description }}
                              </div>
                            </div>
                          {% endif %}
                        {% endif %}
                      {% endfor %}
                    </div>
                  {% endif %}
                </div>
              </div>
            </div>
            <div class="row mx-0 d-lg-none d-block ">
              <div class="col-12 start-area">
                <div data-anitype="{{ forloop.index0 | plus: 1 }}" class="position-relative wrap h-100 as-card-animation card-scale-init as-card-scale overflow-hidden">
                  {%- assign image_blocks = section.blocks | where: 'type', 'image' -%}
                  {% for item in image_blocks %}
                    {% if currentId == item.settings.id %}
                      <div class="picture h-100 overflow-hidden rounded-2 d-none d-md-block">
                        <picture>
                          <img
                            class="w-100 object-fit-cover h-100"
                            src="{{ item.settings.ipad_image | default: item.settings.desktop_image | img_url: 'master' }}"
                            alt="{{ item.settings.ipad_image.alt | default: item.settings.desktop_image.alt | escape }}"
                            width="800"
                            height="600"
                            loading="lazy"
                          >
                        </picture>
                      </div>
                      <div class="picture h-100 overflow-hidden rounded-2 d-block d-md-none">
                        <picture>
                          <img
                            class="w-100 object-fit-cover h-100"
                            src="{{ item.settings.mobile_image | default: item.settings.ipad_image | default: item.settings.desktop_image | img_url: 'master' }}"
                            alt="{{ item.settings.mobile_image.alt | default: item.settings.ipad_image.alt | default: item.settings.desktop_image.alt | escape }}"
                            width="400"
                            height="300"
                            loading="lazy"
                          >
                        </picture>
                      </div>
                      <h4 class="headline position-absolute top-0 fw-bold text-black letter-spacing-4">
                        {{ item.settings.title }}
                      </h4>
                    {% endif %}
                  {% endfor %}

                  {%- assign text_blocks = section.blocks | where: 'type', 'text' -%}
                  <div class="position-absolute bottom-0 w-100">
                    {% for item in text_blocks %}
                      {% if currentId == item.settings.id %}
                        <div class="text-area">
                          <div data-time="500" class="fw-bold title text-black letter-spacing-4">
                            {{ item.settings.title }}
                          </div>
                          <div
                            data-time="900"
                            class="description text-black letter-spacing-4"
                          >
                            {{ item.settings.description }}
                          </div>
                        </div>
                      {% endif %}
                    {% endfor %}
                  </div>
                </div>
              </div>
             
              <div class="col-12 px-0">
                {%- assign card_blocks = section.blocks | where: 'type', 'card' -%}
                <div data-trigger = ".9" data-anitype="{{ forloop.index0 | plus: 1 }}" class="as-card-swiper as-card-animation as-card-scale {% if forloop.index != 1 %} card-scale-achieve {% endif %} card-scale-init card-swiper overflow-hidden position-relative">
                  <div class="swiper-wrapper">
                    {% for item in card_blocks %}
                      {% if currentId == item.settings.id %}
                        <div class="item-card rounded-2 swiper-slide overflow-hidden bg-white h-auto as-card-slide-{{ item.settings.id }}">
                          {% if item.settings.mobile_image or item.settings.desktop_image %}
                          <div class="card-image-wrap" style="max-height: 160px; overflow: hidden; margin-bottom: 16px; border-radius: 4px;">
                            <img
                              class="w-100 object-fit-cover"
                              src="{{ item.settings.mobile_image | default: item.settings.desktop_image | img_url: '400x160', crop: 'center' }}"
                              alt="{{ item.settings.mobile_image.alt | default: item.settings.desktop_image.alt | escape }}"
                              width="400"
                              height="160"
                              loading="lazy"
                            >
                          </div>
                          {% endif %}
                          <div data-time="500" class="swiper-title fw-bold mb-3 text-black letter-spacing-4">
                            {{ item.settings.title }}
                          </div>
                          <div
                            data-time="900"
                            class="description text-black letter-spacing-4"
                          >
                            {{ item.settings.description }}
                          </div>
                        </div>
                      {% endif %}
                    {% endfor %}
                  </div>
                  <div class="pagination-wrap">
                    <div class="position-relative">
                      <div class="swiper-pagination"></div>
                      <div class="position-absolute pagin-area">
                        <span class="as-pagin-{{ forloop.index  }}" data-tabid="{{ currentId }}"></span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Cards",
  "tag": "section",
  "class": "as-brand-cards-wrap",
  "settings": [
    {
      "type": "text",
      "id": "headline",
      "label": "Headline"
    },
    {
      "type": "header",
      "content": "Colors Settings"
    },
    {
      "type": "color",
      "id": "text_color_title",
      "label": "Text Title",
      "default": "#ffffff"
    },
    {
        "type": "header",
        "content": "Kikstart Spacing Settings"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Padding top",
      "default": 64
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Padding Bottom",
      "default": 64
    },
    {
      "type": "range",
      "id": "padding_top_mob",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "For Mobile Padding top",
      "default": 48
    },
    {
      "type": "range",
      "id": "padding_bottom_mob",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "For Mobile Padding Bottom",
      "default": 48
    }
  ],
  "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "settings": [
        {
          "type": "text",
          "id": "id",
          "label": "ID"
        },
        {
          "type": "text",
          "id": "text",
          "label": "Text"
        },
        {
          "type": "header",
          "content": "Colors Settings"
        },
        {
          "type": "color",
          "id": "tab_text_color",
          "label": "Tab Text Color",
          "default": "#ffffff"
        }
      ]
    },
    {
      "type": "image",
      "name": "Image with headline",
      "settings": [
        {
          "type": "text",
          "id": "id",
          "label": "ID"
        },
        {
          "type": "header",
          "content": "IMAGE"
        },
        {
          "type": "image_picker",
          "id": "desktop_image",
          "label": "Desktop image"
        },
        {
          "type": "image_picker",
          "id": "ipad_image",
          "label": "Ipad image"
        },
        {
          "type": "image_picker",
          "id": "mobile_image",
          "label": "Mobile image"
        },
        {
          "type": "header",
          "content": "CONTENT"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Headline"
        }
      ]
    },
    {
      "type": "card",
      "name": "Card",
      "settings": [
        {
          "type": "text",
          "id": "id",
          "label": "ID"
        },
        {
          "type": "image_picker",
          "id": "desktop_image",
          "label": "Desktop image"
        },
        {
          "type": "image_picker",
          "id": "mobile_image",
          "label": "Mobile image"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Headline"
        },
        {
          "type": "text",
          "id": "description",
          "label": "Description"
        }
      ]
    },
    {
      "type": "text",
      "name": "Text",
      "settings": [
        {
          "type": "text",
          "id": "id",
          "label": "ID"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Headline"
        },
        {
          "type": "text",
          "id": "description",
          "label": "Description"
        }
      ]
    }
  ]
}
{% endschema %}
